{extend name='public/base'/}
<!-- 移动端样式 -->
{block name='top'}
<style>
    body {
        background-color: #f2f2f2;
    }

    /* 移动端 */
    @media screen and (max-width: 768px) {

        .layui-layout-admin .layui-layout-left,
        .layui-layout-admin .layui-body,
        .layui-layout-admin .layui-footer {
            left: 0;
        }

        .layui-layout-admin .layui-side {
            left: -300px;
            /* position: fixed;
            top: 0;
            transition: all .3s;
            -webkit-transition: all .3s; */
            z-index: 1000;
        }

        .layui-layout-admin .layui-header {
            z-index: 999;
        }

        .layui-layout-admin .layui-logo {
            z-index: 1000;
        }

        .site-mobile .layui-side {
            left: 0;
        }

        /* 遮罩层 */
        .site-mobile .site-mobile-shade {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, .3);
            z-index: 999;
        }
    }
</style>
<div class="site-mobile-shade" lay-header-event="menuShrink"></div>
{/block}
<!-- Logo -->
{block name='logo'}
<div class="layui-logo layui-hide-xs layui-bg-black" style="cursor:pointer;"
    onclick="window.location.href='/admins/home/index/';return false;">后台管理系统</div>
{/block}

<!-- 头部区域（可配合layui 已有的水平导航） -->
{block name='left'}
<ul class="layui-nav layui-layout-left">
    <!-- 移动端显示 -->
    <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
    </li>
    <li class="layui-nav-item layui-hide-xs">
        <a href="/" target="_blank" title="前台"><i class="layui-icon layui-icon-website"></i></a>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;" lay-header-event="refresh" title="刷新"><i class="layui-icon layui-icon-refresh-3"></i></a>
    </li>
    <!-- <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
    <li class="layui-nav-item layui-hide-xs">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
            <dd><a href="">menu 11</a></dd>
            <dd><a href="">menu 22</a></dd>
            <dd><a href="">menu 33</a></dd>
        </dl>
    </li> -->

</ul>
{/block}

<!-- 头部右侧 -->
{block name='right'}
<ul class="layui-nav layui-layout-right">
    <li class="layui-nav-item layui-hide-xs" lay-unselect="">
        <a href="javascript:;" lay-header-event="fullscreen">
            <i class="layui-icon layui-icon-screen-full"></i>
        </a>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">
            <img src="{$auth['avatar'] ? $auth['avatar'] : ''}"
                class="layui-nav-img">
            {$auth['username']}
        </a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;" lay-header-event="profile" data-url="/admins/account/profile">修改资料</a></dd>
            <dd><a href="javascript:;" lay-header-event="clear" data-url="/admins/account/clear">清除缓存</a></dd>
            <dd><a href="javascript:;" lay-header-event="logout" data-url="/admins/account/logout"
                    data-jump="/admins/account/login">登出</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
            <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
    </li>
</ul>
{/block}

<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
{block name='side'}
<ul class="layui-nav layui-nav-tree" lay-filter="test">
    <!-- 无限极菜单 -->
    {$menus|raw}
</ul>
{/block}

<!-- 内容主体区域 -->
{block name='main'}
<iframe name="main" src="/admins/home/welcome/" scrolling="yes" style="width: 100%;height: 100%;border: 0;"></iframe>
{/block}

<!-- 底部固定区域 -->
{block name='footer'}
<div class="layui-footer">
    欢迎使用后台管理系统
</div>
{/block}

<!-- javascript -->
{block name='js'}
<script>
    //JS 
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //头部事件
        var full = 1;
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                // layer.msg('展开左侧菜单的操作', { icon: 0 });
                $('body').addClass('site-mobile');
                $('.layui-logo').removeClass('layui-hide-xs');
            }
            //遮罩层收缩菜单
            , menuShrink: function () {
                $('body').removeClass('site-mobile');
                $('.layui-logo').addClass('layui-hide-xs');
            }
            //右侧菜单事件
            , menuRight: function () {
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div class="layui-layer-content"><div class="layui-card-header">版本</div><div class="layui-card-body layui-text"><blockquote class="layui-elem-quote" style="border: none;"><p>当前版本：v1.0.0</p></blockquote></div><div class="layui-card-header">关于</div><div class="layui-card-body layui-text"><blockquote class="layui-elem-quote" style="border: none;"> 一套用于开发各类管理系统的通用型 ThinkPHP 后台管理系统模板，基于开源免费的 layui 的制作，内置 thinkphp 各类实际业务场景下相对丰富的示例。<br /><br />作者：葡萄枝子，PHP中文网14期学员。<br /><br />微信QQ 869026782 </blockquote></div></div>',
                    area: ['260px', '100%'],
                    offset: 'rt', //右上角
                    anim: 5,
                    shadeClose: true,
                    scrollbar: false
                });
            }
            // 刷新
            , refresh: function () {
                window.location.reload();
            }
            // 全屏
            , fullscreen: function () {
                if (full == 1) {
                    var ele = document.documentElement;
                    var reqFullScreen = ele.requestFullScreen || ele.webkitRequestFullScreen || ele.mozRequestFullScreen || ele.msRequestFullscreen;
                    if (typeof reqFullScreen !== 'undefined' && reqFullScreen) {
                        reqFullScreen.call(ele);
                    };
                    full = 2;
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    full = 1;
                }
            }
            // 修改资料
            , profile: function (othis) {
                $('iframe[name="main"]').attr('src', othis.data('url'));
            }
            // 清除缓存
            , clear: function (othis) {
                layer.confirm('确定清除缓存吗？', {
                    btn: ['确定', '取消'], icon: 3
                }, function () {
                    $.get(othis.data('url'), {}, function (res) {
                        if (res.code) return layer.alert(res.msg, { icon: 0 });
                        layer.alert(res.msg, { icon: 1 }, function () {
                            window.location.reload();
                        });
                    }, 'json');
                });
            }
            // 登出
            , logout: function (othis) {
                layer.confirm('确定要登出站点吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.post(othis.data('url'), {}, function (res) {
                        if (res.code) return layer.alert(res.msg, { icon: 0 });
                        layer.alert(res.msg, { icon: 1 });
                        setTimeout(function () {
                            window.location.href = othis.data('jump');
                        }, 1000);
                    }, 'json');
                });
            }
        });
    });

    // 哈希路径
    function init() {
        var hash = window.location.hash;
        if (hash.length) {
            document.querySelector('iframe[name="main"]').setAttribute('src', '/admins' + hash.replace('#', ''));
        }
    }
    init();

    // 触发菜单
    function fireMenu(othis) {
        var controller = othis.dataset.controller.toLowerCase();
        var action = othis.dataset.action.toLowerCase();
        var url = '/admins/' + controller + '/' + action + '/';
        document.querySelector('iframe[name="main"]').setAttribute('src', url);
        window.location.hash = '/' + controller + '/' + action + '/';
        // 移动端折叠菜单
        document.querySelector('body').classList.remove('site-mobile');
        document.querySelector('.layui-logo').classList.add('layui-hide-xs');
    }
</script>
{/block}